<template>
  <div class="oe-word-login">
    <div class="login-top">
      <div class="login-top-content">
        <img src="../../assets/images/logo.svg" alt />
      </div>
    </div>
    <div class="login-content">
      <p class="login-content-p">请输入口令进入考试</p>
      <div class="six-digit-wrapper">
        <a-input
          v-for="(item, index) in digits"
          :key="index"
          :ref="`ref${index}`"
          class="input"
          v-model="item.value"
          type="text"
          @input="onInput(index)"
          @keyup.delete="onDelete(index)"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      digits: [
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        }
      ],
      commond: ''
    };
  },
  props: {
    examId: {
      type: String,
      default: ''
    }
  },
  mounted() {},
  methods: {
    commandLigin() {
      this.$http.post('/api/portal/loginforour/commandLigin', {}).then((res) => {
        if (res.isLogin == 0) {
          this.$router.push({
            name: 'passLogin'
          });
        }
      });
    },
    onInput(index) {
      // index < 5 ，如果是第6格，不触发光标移动至下一个输入框。
      if (this.digits[index].value.length > 1) {
        this.digits[index].value = this.digits[index].value[1];
      }
      if (this.digits[index].value && index < 7) {
        this.$refs['ref' + (index + 1)][0].focus();
      }
      if (this.digits[index].value && index == 7) {
        this.getNum();
      }
    },
    onDelete(index) {
      if (this.digits[index].value == '' && index > 0) {
        this.$refs['ref' + (index - 1)][0].focus();
      }
    },
    getNum() {
      var num = '';
      for (let i = 0; i < this.digits.length; i++) {
        num = num + this.digits[i].value;
      }
      this.commond = num;
      this.loginExam();
    },
    loginExam() {
      this.$http
        .post('/api/study/workexam/checkCode', {
          // isCode: 2, //是否口令登录
          code: Number(this.commond), //口令
          examId: this.examId //考试Id
        })
        .then((rst) => {
          if (rst.code > 0) {
            this.$message.success(rst.msg);
            this.$router.push({
              name: 'enterExam',
              params: {
                Id: this.examId //考试Id
              }
            });
          } else {
            this.$message.error(rst.msg);
            this.digits = [
              { value: '' },
              { value: '' },
              { value: '' },
              { value: '' },
              { value: '' },
              { value: '' },
              { value: '' },
              { value: '' }
            ];
            this.$refs['ref' + 0][0].focus();
          }
        });
    }
  }
};
</script>
